<template>
    <PageMain>
        <el-form class="w-md">
            <el-form-item label="扩展搜索参数：">
                <el-input v-model="filterValues.extend" />
            </el-form-item>
        </el-form>
        <!-- 表格主题 集成搜索条件 -->
        <proTable class="no-card" ref="tableRef" :columns="columns" :init-param="Object.assign(initParam, filterValues)"
            :request-api="getTableList" :data-callback="dataCallback">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" plain icon="Plus" @click="editFn">新增</el-button>
                <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected"
                    @click="batchDelete(scope.selectedListIds)">
                    批量删除
                </el-button>
                <el-button type="primary" icon="Pointer" plain @click="setCurrent">选中第四行</el-button>
            </template>
            <!-- 表格 toolButton 按钮 -->
            <template #toolButton="scope">
                <el-button type="primary" plain icon="Download" @click="downloadFile(scope)">下载</el-button>
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button type="primary" text @click="enableFn(scope.row)">详情</el-button>
            </template>

            <!-- Expand -->
            <template #expand="scope">
                {{ scope.row }}
            </template>

            <!-- usernameHeader -->
            <template #usernameHeader="scope">
                <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
                    {{ scope.column.id }}
                </el-button>
            </template>
            <!-- createTime -->
            <template #createTime="scope">
                <el-button type="primary" link @click="ElMessage.success('我是通过作用域插槽渲染的内容')">
                    {{ scope.row.date }}
                </el-button>
            </template>
        </proTable>
        <formDialog ref="formDialogRef" @updata="updata" />
    </PageMain>

</template>

<script setup lang="jsx">
import api from "@/api";
import { useDownload } from "@/hooks/useDownload";
import { ElMessage, ElMessageBox } from "element-plus";
import formDialog from "./dialog/form.vue";
const tableRef = ref();

// 表格配置项
const columns = [
    { type: "radio", label: "单选", width: 80 },
    { type: "selection", fixed: "left", width: 80 },
    { type: "sort", label: "Sort", width: 80 },
    { type: "expand", label: "Expand", width: 85 },
    {
        label: "ID", prop: "id",
        headerRender: (scope) => {
            return (
                <el-button type="primary" onClick={() => ElMessage.success("我是通过 jsx 语法渲染的表头")}>
                    {scope.column.label}
                </el-button>
            );
        },
        render: (scope) => {
            return (
                <el-button type="primary" link onClick={() => ElMessage.success("我是通过 tsx 语法渲染的内容")}>
                    {scope.row.id}
                </el-button>
            );
        }
    },
    {
        label: "日期",
        prop: "date",
        align: "left",
        // 字典数据（本地数据）
        // enum: genderType,
        // 字典请求不带参数
        // enum: getUserGender,
        // 字典请求携带参数
        // enum: () => getUserGender({ id: 1 }),
        search: {
            el: "date-picker", //element组件 或者使用 render自定义
            span: 1, // grid 占位大小
            key: "timekey", // 字段名 不填则使用 列的 prop值
            label: "日期时间", // 如果不填 者显示列名
            showLabel: true, // 是否显示Label
            props: {
                //组件props
                clearable: true,
                type: "datetimerange",
                valueFormat: "YYYY-MM-DD HH:mm:ss",
                disabledDate: (time) => {
                    return time.getTime() > Date.now() - 8.64e6;
                }
            },
        },
    },
    { label: "注册人数", prop: "registerNum", search: { el: "input" } },
    {
        label: "开卡成功数", prop: "activateCard",
        search: {
            // 自定义 search 显示内容
            render: ({ searchParam }) => {
                return (
                    <div class="flex-center">
                        <el-input vModel_trim={searchParam.minAge} placeholder="最小年龄" />
                        <span class="mr10px ml10px">-</span>
                        <el-input vModel_trim={searchParam.maxAge} placeholder="最大年龄" />
                    </div>
                );
            }
        }
    },
    { label: "充值金额(USDT)", prop: "recharge" },
    { label: "消费金额(HKD)", prop: "consumption" },
    { label: "总余额结余(HKD)", prop: "balance" },
    { label: "总可消费余额结余(HKD)", prop: "consumptionBalance" },
    { label: "资金池金额结余(HKD)", prop: "number1" },
    { label: "未转卡金额结余(HKD)", prop: "number2" },
    { label: "今日已转入资金池总金额(HKD)", prop: "number3" },
    { label: "今日已转出资金池总金额(HKD)", prop: "number4" },
    {
        prop: "operation",
        label: "操作",
        align: "center",
        fixed: "right",
        width: 90,
    },
];

// 表格初始参数
const initParam = reactive({
    pageIndex: 1,
    pageSize: 10,
});
// 扩展参数
const filterValues = reactive({
    extend: ''
})
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
const dataCallback = (data) => {
    return {
        list: data.list,
        total: data.total,
    };
};
const getTableList = (params) => {
    if (params.timekey) {
        params.startCreateTime = params.timekey[0];
        params.endCreateTime = params.timekey[1];
        delete params.timekey;
    }
    return api.post(`/api/query/dailyReport`, params, {
        loading: true,
    });
};

// 更新数据
const updata = () => {
    tableRef.value.getTableList();
};

// 批量删除用户信息
const batchDelete = async (id) => {
    ElMessage.success(`选中 id 为【${id}】的数据`)
    tableRef.value?.clearSelection();
    tableRef.value?.getTableList();
};
// 选择行
const setCurrent = () => {
    tableRef.value.radio = tableRef.value?.tableData[3].id;
    tableRef.value?.element?.setCurrentRow(tableRef.value?.tableData[3]);
    tableRef.value?.element?.toggleRowSelection(tableRef.value?.tableData[3], true);

};
watch(
    () => tableRef.value?.radio,
    () => tableRef.value?.radio && ElMessage.success(`选中 id 为【${tableRef.value?.radio}】的数据`)
);
// 下载
const downloadFile = async (scope) => {
    console.log(scope )
    ElMessageBox.confirm("确认下载数据?", "温馨提示", { type: "warning" }).then(() =>
        useDownload(exportUserInfo, "用户列表", tableRef.value?.searchParam)
    );
};

//保存到桌面
function toDesktop(sUrl, sName) {
    try {
        var WshShell = new ActiveXObject("WScript.Shell");
        var oUrlLink = WshShell.CreateShortcut(WshShell.SpecialFolders("Desktop") + "\\" + sName + ".url");
        oUrlLink.TargetPath = sUrl;
        oUrlLink.Save();
    }
    catch (e) {
        alert("当前IE安全级别不允许操作！");
    }
}

const formDialogRef = ref();
const editFn = (title, row) => {
    formDialogRef.value.show('title', row);
};
</script>
<style scoped lang="scss"></style>
